<div class="box-container" fxLayout="column" [ngStyle.lt-sm]="'min-height: 800px;'">
  <div class="app-title">Simple example app for the ngx-ace-wrapper</div>

  <div class="info-container">
    This example only shows some of the available features, to see all check Ace demos / documentation.
  </div>

  <div class="horizontal-container" fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="stretch" fxFlex="auto">
    <div class="vertical-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="50%">
      <div class="box-title">Settings</div>

      <div class="action-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="auto">
        <div class="action-button" fxLayout="column" fxLayoutAlign="center" fxFlex="auto" (click)='toggleType()'>{{(type == "component") ? "Switch to directive" : "Switch to component"}}</div>

        <div class="action-button" fxLayout="column" fxLayoutAlign="center" fxFlex="auto" (click)='toggleDisabled()'>Toggle disabled state</div>

        <div class="action-button" fxLayout="column" fxLayoutAlign="center" fxFlex="auto" (click)='toggleReadonly()'>Toggle read-only mode</div>

        <div class="action-button" fxLayout="column" fxLayoutAlign="center" fxFlex="auto" (click)='toggleMode()'>{{(config.mode === "javascript") ? "Change to text mode" : "Change to javascript mode"}}</div>

        <div class="action-button" fxLayout="column" fxLayoutAlign="center" fxFlex="auto" (click)='toggleTheme()'>{{(config.theme == "github") ? "Change to clouds theme" : "Change to github theme"}}</div>

        <div class="action-button" fxLayout="column" fxLayoutAlign="center" fxFlex="auto" (click)='clearEditorContent()'>Clear the editor content</div>
      </div>
    </div>

    <div class="vertical-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="50%">
      <div class="box-title">Ace</div>

      <div class="content-container" fxLayout="column" fxLayoutAlign="stretch" fxFlex="auto">
        <ace *ngIf="type == 'component' && show" fxFlex="auto" [config]="config" [value]="'Some example content'" [disabled]="disabled" (blur)="onEditorBlur($event)" (focus)="onEditorFocus($event)" (valueChange)="onValueChange($event)" (selectionChange)="onSelectionChange($event)">
        </ace>

        <div *ngIf="type == 'directive' && show" class="ace-editor" fxFlex="auto" [ace]="config" [disabled]="disabled" (blur)="onEditorBlur($event)" (focus)="onEditorFocus($event)" (change)="onContentChange($event)" (selectionChange)="onSelectionChange($event)">
          Some example content
        </div>
      </div>
    </div>
  </div>
</div>
